<template>
  <div
    class="page-bg"
    :class="{ pb50: isShowBar }"
    ref="rootRef"
  >
    <router-view />
    <Tabbar v-if="isShowBar" />

    <Back v-if="!isShowBar && !hiddenBack && !isPreview" />


    <div class="mask" v-if="isShowGuide">
      <van-image
        class="arrow"
        mode="widthFix"
        :src="require('@/static/all.png')"
      />
      <div class="know">
        <van-image
          class="step-know"
          mode="widthFix"
          :src="require('@/static/know.png')"
          @click="clearGuide()"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { computed, ref, provide, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import Tabbar from '@/components/Tabbar';
import Back from '@/components/Back';
import { useSetPageTitle } from '@/hooks/utils';
import XltData from '@/utils/XltData';
import Storage from '@/utils/storage';

export default {
  components: {
    Tabbar,
    Back
  },
  setup() {
    useSetPageTitle();

    const route = useRoute();
    const store = useStore();
    // 是否展示 navbar
    const isShowBar = computed(() => route?.meta?.isShowBar);
    const hiddenBack = computed(() => route?.meta?.hiddenBack);
    const isKeep = computed(() => route?.meta?.keep);

    const employeeId = route.query.employeeId || '';

    const departmentId = computed(() => route.query.departmentId || '');

    const sourceType = route.query.sourceType;

    const isPreview = route.query.isPreview;

    const hospital = route.query.hospital;

    const hosUserName = route.query.hosUserName;

    const rootRef = ref(null);
    provide('rootRef', rootRef);

    watchEffect(() => {
      const { global } = store.state;
      if (sourceType == 'train') {
        XltData.login(employeeId);
        // 设置公共属性
        XltData.setCommonProperty({
          productName: 'HEALS助手',
          hosUserName: hosUserName,
          hosUserId: employeeId,
          hosUserType: '护士',
          hospital: hospital, //医院
          ward: departmentId.value //科室
        });
      } else {
        if (global.userInfo?.userId) {
          XltData.login(global.userInfo.userId);
          // 设置公共属性
          XltData.setCommonProperty({
            productName: 'H5患者端',
            hosUserName: global.userInfo.name,
            hosUserId: global.userInfo.userId,
            hosUserType: '患者',
            hospital: global.userInfo.hospitalId, //医院
            subHospital: global.userInfo.branchHospitalId, //分院
            department: global.userInfo.largeDepartmentId, //大科室
            ward: global.userInfo.departmentId //科室
          });
        }
      }
    });

    // 加载地区数据
    store.dispatch('getAreaList');
    

    store.dispatch('getDictResult', ['educationLevel', 'patientRelation']);
    const routerList = ['/bed', '/no-login'];
    const guideStatus = ref(Storage.get('isFirst') || 0);
    const isShowGuide = computed(() => {
      return !guideStatus.value && routerList.indexOf(route.fullPath) === -1 && !isPreview;
    });

    const clearGuide = () => {
      guideStatus.value = 1;
      Storage.set('isFirst', 1);
    };

    return { route, isShowBar, isKeep, isPreview, rootRef, hiddenBack, isShowGuide, clearGuide };
  }
};
</script>
<style lang="scss" scoped>
.page-bg {
  height: 100vh;
  overflow: auto;
  background-color: #27cdc5;
  background-image: url('https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/p-home-bg.png');
  background-size: 100% 456px;
  background-position: top center;
  background-repeat: no-repeat;
}

.pb50 {
  padding-bottom: 100px;
}

.mask {
  position: fixed;
  background: rgba(0, 0, 0, 0.85);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10000;
  .arrow {
    position: absolute;
    top: 10px;
    right: 60px;
    width: 80%;
  }
  .problem {
    position: absolute;
    top: 15%;
    width: 336px;
    height: 160px;
    font-size: 56px;
    color: rgba(255, 227, 98, 1);
    left: 10%;
  }
  .step {
    position: absolute;
    top: 40%;
    left: 15%;
    color: #fff;
    font-size: 30px;
    .step-flex {
      display: flex;
      margin-top: 25px;
      flex-wrap: wrap;
      align-items: center;
    }
  }
}
.step-img {
  width: 64px;
  height: 64px;
  margin-left: 20px;
  margin-right: 20px;
}
.ml13 {
  margin-left: 25px;
  margin-top: 15px;
}
.know {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  // top: 900px;
  bottom: 10%;
  z-index: 10003;
  .step-know {
    width: 272px;
    height: 110px;
  }
}
</style>  

